<template>
	<router-view style="position:absolute;" />
	<div id="box">
    <transition name="el-fade-in-linear">
      <div class="button"  @click="nextPage" v-if="buttonVis" >
        <span>点击开始</span>
      </div>
    </transition>
		<div id="contentBox">
			<div  id="leftBox" class="leftBox" ref="natoEle">
				<p class="titleSt" ref="titleNato">
					北大西洋公约组织
				</p>
				<img src="../../../public/img/NatoSymbol.png" alt="">
				<div class="contentSt" >
					<p >
						北大西洋公约组织，简称北约组织或北约，是北美与欧洲国家为实现防卫协作而建立的一个国际军事集团组织，成立于1949年8月24日。总部位于比利时布鲁塞尔。  
						北约拥有大量核武器和常规部队，是西方的重要军事力量。这是二战后资本主义阵营军事上实现战略同盟的标志，是马歇尔计划在军事领域的延伸和发展，使美国得以控制欧盟的防务体系，是美国世界超级大国领导地位的标志。
					</p>
				</div>
			</div>
			<div id="rightBox" class="rightBox" ref="wtoEle">
				<p class="titleSt">
					华沙条约组织
				</p>
				<img src="../../../public/img/WtoSymbol.png" alt="">
				<div class="contentSt" >
					<p>
					华沙条约组织（又称华沙公约组织、简称华约组织或华约。1955年西德加入北约后，欧洲社会主义阵营国家签署了《华沙公约》（又称苏东条约）。该条约由原苏联领导人赫鲁晓夫起草，1955年5月14日在波兰首都华沙签署，东欧社会主义国家除南斯拉夫以外，全部加入华约组织；在亚洲方面，除中华人民共和国和朝鲜民主主义人民共和国之外，其他社会主义国家都是华约组织观察员国。
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
        buttonVis:false
			}
		},
		mounted() {
			setTimeout(()=>{
				this.initBackGround()
			},1000)
      setTimeout(()=>{
        this.buttonVis = true
      },10000)

		},
		methods:{
			nextPage(){
				this.$router.push({path:"/NatoExpantionHistory"})
			},
			initBackGround(){
				var natoEle = this.$refs.natoEle;
				var wtoEle  = this.$refs.wtoEle;
				var titleEele = this.$refs.titleNato;
				this.bgAudioEle = document.createElement("AUDIO");
				natoEle.className = "toWidth50left";
				wtoEle.className = "toWidth50right";
			}
		}
	}
</script>

<style scoped="scoped">
	#textBox{
		position: absolute;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#box{
		position: absolute;
		width: 100%;
		height: 100%;
	}

	
	#contentBox{
		position: absolute;
		z-index: -10;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
	}
	
	@-webkit-keyframes titleMove{
		from{top: -1500px;}
		to{ top: 10%;}
	}
	@-webkit-keyframes contentMove{
		from{bottom: -1500px;}
		to{ bottom: 5%;}
	}
	
	img{
		width: 50%;
	}
	
	.titleSt{
		position: absolute;
		top: 10%;
		font-size: 60px;
		font-weight: 700;
		letter-spacing:4px;
		background-color: rgba(0,0,0,0.5);
		color: white;
		padding: 10px;
		animation:titleMove 5s 1 forwards ;
	}
	.contentSt{
		position: absolute;
		bottom: 5%;
		width: 30%;
		text-indent: 2em;
		letter-spacing:2px;
		font-size: 20px;
		color: white;
		animation:contentMove 8s 1 forwards;
	}
	.toWidth50left{
		width: 50%;
		transition: width 2s;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #003399;
	}
	
	.toWidth50right{
		width: 50%;
		transition: width 2s;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ed0814;
	}
	
	.leftBox{
		width:0%;
		background-color: #003399;
	}
	
	.rightBox{
		width: 0%;
		background-color: #ed0814;
	}
	
	.nextButton{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 80px;
    border-radius: 20px;
    color: white;
		font-size: 20px;
		font-weight: 700;
		letter-spacing:3px;
    box-shadow:  10px 5px 10px 0px rgba(0,0,0,0.5);
    text-align: center;
    line-height: 80px;
    background-image: url("https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/btn_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
	}

  .button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    border-radius: 20px;
    background-image: url("https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/btn_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    height: 80px;
    line-height: 80px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    box-shadow:  15px 10px 10px 0px rgba(0,0,0,0.5);
  }

  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }

  .button span:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

  .button:hover span {
    padding-right: 25px;
  }

  .button:hover span:after {
    opacity: 1;
    right: 0;
  }

</style>
